import React from 'react';
import './homehot.scss'
import axios from 'axios'

export default class Homehot extends React.Component{
    constructor(props){
        super(props)
        this.state={
            HomeHot:[]
        }
    }
    componentDidMount(){
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/hot').then((res)=>{
            if(res.data){
                this.setState({
                    HomeHot:res.data.result
                })
            }
        })
    }
    render(){
        const {HomeHot} = this.state
        return(
            <div className='homehot'>
                 <div id="app">
                    <div className="center">
                        <div className="head">
                            <h3>
                                人气推荐
                                <small>人气爆款 不容错过</small>
                            </h3>
                             <span>查看全部<i></i></span>
                        </div>
                        <ul>
                            {
                                HomeHot&&HomeHot.map((A,index)=>{
                                    return (
                                        <li key={index}>
                                            <img src={A.picture} alt="" />
                                            <p>{A.title}</p>
                                            <p>{A.alt}</p>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}